<template>
	<rui-pages go="back">
		<view class="interpret">

			<rui-card title="过氧化氢解析" class="interpret_tips">
				<rui-fault-tips></rui-fault-tips>
			</rui-card>
			<rui-card title="异常断电参数" class="interpret_params">

				<view class="interpret_params_item">
					<view class="interpret_params_item_label">
						灭菌开始时间
					</view>
					<view class="interpret_params_item_content">
						07/06 13:21:01
					</view>
				</view>
				<view class="interpret_params_item">
					<view class="interpret_params_item_label">
						选用模式缓存
					</view>
					<view class="interpret_params_item_content">
						Sqlite
					</view>
				</view>
				<view class="interpret_params_item">
					<view class="interpret_params_item_label">
						操作员
					</view>
					<view class="interpret_params_item_content">
						qinhai
					</view>
				</view>
			</rui-card>
			<rui-card title="过氧化氢处理中">

				<view class="interpret_handle" @click="$rui.route('pages/device/issue/issue')">

					<view class="interpret_handle_image">

					</view>
					<view class="interpret_handle_info">
						<view class="interpret_handle_info_item">
							<view class="interpret_handle_info_item_label">
								抽离过氧化氢
							</view>
							<view class="interpret_handle_info_item_time">
								1:30
							</view>
						</view>
						<view class="interpret_handle_info_item">
							<view class="interpret_handle_info_item_label">
								解析过氧化氢
							</view>
							<view class="interpret_handle_info_item_time">
								1:30
							</view>
						</view>
					</view>
				</view>
			</rui-card>
		</view>
	</rui-pages>
</template>

<script>

</script>

<style lang="scss" scoped>
	.interpret {
		display: grid;
		grid-template-columns: 400px 1fr;
		gap: 15px;

		&_tips {
			grid-column: 1/3;
		}

		&_params {
			&_item {
				width: 200px;
				margin: 20px auto;

				&_label {
					&::after {
						content: ":";
					}
				}

				&_content {
					background: var(--bg);
					padding: 10px;
					margin-top: 5px;
					border-radius: 5px;
					text-align: center;
					font-size: 18px;
					font-weight: bold;
				}
			}
		}




		&_handle {
			display: flex;
			align-items: center;
			transform: translate(0, 30%);

			&_info {
				margin-left: 50px;

				&_item {
					display: flex;
					align-items: center;
					margin: 20px 0;
					
					&_time{
						background: var(--bg);
						padding: 10px;
						border-radius: 5px;
						font-size: 18px;
						font-weight: bold;
						text-align: center;
						width: 150px;
					}

					&_label {
						margin-right: 10px;

						&::after {
							content: ":";
						}
					}
				}
			}

			&_image {
				width: 200px;
				height: 150px;
				background: #fff;
				border-radius: 20px;
				margin-left: 10%;
			}
		}



	}
</style>